<template>
		<view class="charts">
			<f2 :init="initChart" :charts="chartCopyData"/>
		</view>
</template>

<script>
	import f2 from '@/components/i-uni-f2/f2.vue';
	export default {
		name: 'ChartsuperBar',
		props: {
			chartData: Object
		},
		data() {
			return {
			};
		},
		created() {
		},
		computed: {
			chartCopyData() {
				return this.chartData.data;
			}
		},
		components: {
			f2
		},
		methods:{
			initChart(F2, config) {
				 const	chart = new F2.Chart(config);
					chart.source(this.chartData.data);
					chart.coord('polar', {
					  transposed: true,
					  innerRadius: 0.6,
					  radius: 0.85
					});
					chart.axis(false);
					chart.tooltip({
						background: {
						  radius: 4,
						  fill: '#ffffff',
						  padding: [ 6, 10 ],
						  shadowColor: 'rgba(0, 0, 0, 0.2)',
						  shadowBlur: 20
						},
						titleStyle: {
						  fontSize: 14,
						  fill: '#555555',
						  textAlign: 'start',
						  textBaseline: 'top'
						},
						nameStyle: {
						  fontSize: 14,
						  fill: '#555555',
						  textAlign: 'start',
						  textBaseline: 'middle'
						},
						valueStyle: {
						  fontSize: 14,
						  fill: '#555555',
						  textAlign: 'start',
						  textBaseline: 'middle'
						},
						onShow:(obj) => {
							obj.items[0].name = this.chartData.name;
							obj.items[0].value += this.chartData.unit;
						}
					});
					chart.legend({
					  position: 'bottom',
					  align: 'center',
					  offsetX:10,
					  itemWidth: 56, // 图例项按照实际宽度渲染
					  wordSpace: 14,
					  marker(x, y, r, ctx) {
					    ctx.lineWidth = 4;
					    ctx.strokeStyle = ctx.fillStyle;
					    ctx.moveTo(x - 10, y - 4);
					    ctx.lineTo(x - 10, y + 4);
					    ctx.lineTo(x + 10, y + 4);
					    ctx.lineTo(x + 10 , y - 4);
						ctx.lineJoin = 'round';
						ctx.closePath()
					    ctx.stroke();
					    ctx.fill();
					  },
					  nameStyle: {
					    fill: '#394954', // 文本的颜色
					  }
					});
					chart.guide(false)
					// 配置文本饼图
					chart.pieLabel({
					  sidePadding: 25,
					  label1: function label1(data) {
					    return {
					      text: data.grade,
					      fill: '#394954',
					    };
					  },
					   anchorStyle: {
						   lineWidth:0,
						   r : 0,
					   },
			
					});
					chart.interval()
					  .position('const*num')
					  .color('grade', [ '#1890FF', '#13C2C2', '#FAC52B', '#FF7543' ])
					  .adjust('stack');
					  
					chart.render();
					return chart
				}
			}
		
		}
</script>

<style scoped>
	.charts {
			width: 100%;
			height: 100%;
		}
</style>
